import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
export default class CoverageCell extends Component {
  //初始化数据，添加isShow属性，isShow属性控制展开与关闭
 constructor(props) {
    super(props);
  
    this.state = {
      isShow:false,
      selectedId:null
    };
  }

  detail=(title)=>{
// 改变状态，刷新组件
    this.setState({
      isShow:!this.state.isShow,
      selectedId:title
    });
    // this.setState({
    //   selectedId:title
    // });
// 子组件给父组件传点击的是哪一个分组
    this.props.detail(title);
  }
//初始化数据需要一个分组的titil和一个分组下的数组
  static defaultProps = {
    title:'',
    cars:[],
  }
//利用push输出分组下的cell
  isShowText(){
   const {title,cars} = this.props;
   var allChild = [];
   for (var i = 0; i < cars.length; i++) {
     allChild.push(
        <View key={i} style={{/*height:30,*/flexDirection:'row',alignItems:'center'}}>
           <Text style={{flex:2}}>{cars[i].name}</Text>
           <Text style={{flex:2,textAlign:'right'}}>{cars[i].phoneNumber}</Text>
        </View>
      )
    }
    return allChild;
  }
  
  render() {
    const {title,cars,selectedId} = this.props;
    return (
       <View style={{flex: 1}}>
             <View style={{flex:1,marginBottom:15,backgroundColor:'white'}}>
              <TouchableOpacity onPress={()=>{this.detail(title)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 <Text>{title}</Text>
                 <View style={{backgroundColor:selectedId===title?'red':'green',height:15,width:15}}></View>
                 
              </TouchableOpacity>
              {this.state.isShow?<View>{this.isShowText()}</View>:<View></View>}
             </View>
             
       </View>
       
    );
  }
}

const styles = StyleSheet.create({
    headerLine:{  
    height:50,  
    flexDirection:'row',  
    borderBottomWidth:1,  
    borderBottomColor:'red',  
  },  
  headerRows:{  
    flex:1,  
    justifyContent:'center',  
    alignItems:'center',  
  },  
  showitemContain:{  
    borderWidth:1,  
    borderColor:'red',  
    height:110,  
    justifyContent:'center',  
    alignItems:'center',  
  }  
});